<template>
  <span>
    <template v-if="readonly">
      {{ value_display2 }}
    </template>

    <template v-else-if="fieldInfo.type === 'date'">
      <ODatePicker
        v-model="value2"
        :placeholder="node.placeholder || node.string"
        :show-time="false"
        @change="onChange"
      />
    </template>

    <template v-else>
      todo edit: date, {{ fieldInfo.type }} {{ value_display }}
    </template>
  </span>
</template>

<script setup>
import ODatePicker from '@/odoojs-antdv/OInput/ODatePicker.vue'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'

import { computed } from 'vue'

import { useWidget } from './userWidget'

dayjs.extend(utc)

const props = defineProps(['modelValue', 'node', 'formInfo'])
const emit = defineEmits(['update:modelValue', 'change'])

const useData = useWidget(props, { emit })

const { fieldInfo, readonly, value_display } = useData
const { value2, onChange } = useData

const value_display2 = computed(() => {
  const val = value_display.value

  if (fieldInfo.value.type === 'datetime') {
    const val2 = utc2local(val)

    return val2
  } else {
    return val
  }
})

function utc2local(str) {
  if (str) {
    const dt = dayjs.utc(str)
    const str2 = dt.local().format('YYYY-MM-DD')
    return str2
  }

  return str
}
</script>

<style type="text/css"></style>
